<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link  href="test.css" />
		<script src="sort.js"></script>
		<script src="util.js"></script>
		<script src="data.js"></script>
		<script src="../js/echarts.js"></script>
	</head>
	<body>
		<script type="text/javascript">
			require.config({
				paths:{
					echarts:'../js'
				}
			});
			require(
				 [	
                	'echarts',
                	'echarts/chart/line',
		            'echarts/chart/bar',
		            'echarts/chart/scatter',
		            'echarts/chart/k',
		            'echarts/chart/pie',
		            'echarts/chart/radar',
		            'echarts/chart/force',
		            'echarts/chart/chord',
		            'echarts/chart/gauge',
		            'echarts/chart/funnel',
		            'echarts/chart/eventRiver',
		            'echarts/chart/venn',
		            'echarts/chart/treemap',
		            'echarts/chart/tree',
		            'echarts/chart/wordCloud',
		            'echarts/chart/heatmap',
		            'echarts/chart/map'
                ],
             	function (ec){
             		 var myChart = ec.init(document.getElementById('main'));
             		 
//           		1,个位数显示太小。
//					2,最小值与最大值超过500倍范围。
//					3,所有值接近平均值效果不是很好。
//					4,top 要看容器大小。一般20-30左右合适。(top太大容器不够大，有可能name与value的值会错乱)

             	console.log(data.length)	 
				var  n = 10;
             	for(var i=0;i<data.length;i++){
             		
             		var x = Math.round(Math.random() * 99)
             		if(x<10){
             			x += 50;
             		}
             		x=99;
             		if(i==0){
//           			data[i].value = n * i +2 *9000; 
//						data[i].value = 1000; 
						data[i].value = 99;
             		}else{
             			data[i].value = x;
//           			data[i].value = 100000;
             		}
             		
//           		data[i].value = data[i].value/100 ; 
             		data[i].name = data[i].value;
//           		console.log(JSON.stringify(data[i].value))
					
             	}
             	
             	for(var i=0;i<10;i++){
             		var x = Math.round(Math.random() * 99)
             		if(x<10){
             			x += 50;
             		}
             		x=99
             		var temp = {
             			name : x,
             			value : x
//						name : 100000,
//           			value : 100000
             		}
             		data.push(temp)
             	}
             	
             		 data.sort(compare_desc("value"))
//           		  console.log(JSON.stringify(data[19]))
//           		 data[19].name = data[19].value *100;
//           		 data[19].value = data[19].value * 100;
//           		 console.log(JSON.stringify(data[19]))
//           		 data.sort(compare_desc("value"))
             		var option = {
						    title: {
						        text: 'Google Trends',
						        link: 'http://www.google.com/trends/hottrends'
						    },
						    tooltip: {
						        show: true
						    },
						    series: [{
						        name: 'Google Trends',//鼠标悬浮，提示显示
						        type: 'wordCloud',
						        size: ['80%', '80%'],//宽度与高度设置
						        textRotation : [0, 45, 90, -45],
						        //textRotation:[0,30,60,90,120],//字符串随机倾斜角度
						        textPadding: 5, //字符串内边
						        autoSize: {
						            enable: true,
						             minSize: 10//最小字体大小
						        },
						       
						        data: data
						    }]
						};
                    
             			
             		
             		
             	myChart.setOption(option);	
             		
             	}
			);
		</script>
		<div id="main" style="height: 680px; border: 1px solid #CCCCCC; padding: 10px;"></div>
	</body>
</html>
